import {createElement, findDOMNode, Component} from 'rax';
import Touchable from 'rax-touchable';

import ImgAddHot from './components/imgAddHot';
import TabBody from './components/tabBody';

/**
 *
 * 默认数据
 *
 * */

const defaultModuleData = {
  pages: [
    {
      pageJson: {
        screenHeight: 1511,
        screenWidth: 560,
        hot: [{
          data: {
            name: 'hot1',
            x: 8,
            y: 82,
            width: 236,
            height: 274,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot2',
            x: 270,
            y: 86,
            width: 238,
            height: 266,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot3',
            x: 2,
            y: 376,
            width: 242,
            height: 274,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot4',
            x: 266,
            y: 370,
            width: 258,
            height: 282,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot5',
            x: 28,
            y: 684,
            width: 228,
            height: 276,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot6',
            x: 274,
            y: 688,
            width: 238,
            height: 278,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot7',
            x: 218,
            y: 1048,
            width: 148,
            height: 198,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot8',
            x: 224,
            y: 1276,
            width: 152,
            height: 198,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot9',
            x: 380,
            y: 1050,
            width: 146,
            height: 202,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot10',
            x: 38,
            y: 1058,
            width: 162,
            height: 192,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot11',
            x: 46,
            y: 1268,
            width: 158,
            height: 214,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot12',
            x: 384,
            y: 1280,
            width: 150,
            height: 198,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }],
        img: [{
          data: {
            name: 'img1',
            x: 0,
            y: 0,
            width: 560,
            height: 653,
            url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2HMjYo0zJ8KJjSspkXXbF7VXa-3355153118.jpg'
          }
        }, {
          data: {
            name: 'img2',
            x: 0,
            y: 653,
            width: 560,
            height: 333,
            url: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2zP4lpgDD8KJjy0FdXXcjvXXa-3355153118.jpg'
          }
        }, {
          data: {
            name: 'img3',
            x: 0,
            y: 986,
            width: 560,
            height: 525,
            url: 'https://img.alicdn.com/imgextra/i3/3355153118/TB223jYo0zJ8KJjSspkXXbF7VXa-3355153118.jpg'
          }
        }]
      }
    },
    {
      pageJson: {
        screenHeight: 1511,
        screenWidth: 560,
        hot: [{
          data: {
            name: 'hot1',
            x: 8,
            y: 82,
            width: 236,
            height: 274,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot2',
            x: 270,
            y: 86,
            width: 238,
            height: 266,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot3',
            x: 2,
            y: 376,
            width: 242,
            height: 274,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot4',
            x: 266,
            y: 370,
            width: 258,
            height: 282,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot5',
            x: 28,
            y: 684,
            width: 228,
            height: 276,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot6',
            x: 274,
            y: 688,
            width: 238,
            height: 278,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot7',
            x: 218,
            y: 1048,
            width: 148,
            height: 198,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot8',
            x: 224,
            y: 1276,
            width: 152,
            height: 198,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot9',
            x: 380,
            y: 1050,
            width: 146,
            height: 202,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=oldstarts'
          }
        }, {
          data: {
            name: 'hot10',
            x: 38,
            y: 1058,
            width: 162,
            height: 192,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot11',
            x: 46,
            y: 1268,
            width: 158,
            height: 214,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }, {
          data: {
            name: 'hot12',
            x: 384,
            y: 1280,
            width: 150,
            height: 198,
            url: 'https://balabala.m.tmall.com/shop/shop_auction_search.htm?spm=a1z60.7754813.0.0.488e9c7fwVdrCZ&suid=642320867&sort=default'
          }
        }],
        img: [{
          data: {
            name: 'img1',
            x: 0,
            y: 0,
            width: 560,
            height: 653,
            url: 'https://img.alicdn.com/imgextra/i2/3355153118/TB2HMjYo0zJ8KJjSspkXXbF7VXa-3355153118.jpg'
          }
        }, {
          data: {
            name: 'img2',
            x: 0,
            y: 653,
            width: 560,
            height: 333,
            url: 'https://img.alicdn.com/imgextra/i3/3355153118/TB2zP4lpgDD8KJjy0FdXXcjvXXa-3355153118.jpg'
          }
        }, {
          data: {
            name: 'img3',
            x: 0,
            y: 986,
            width: 560,
            height: 525,
            url: 'https://img.alicdn.com/imgextra/i3/3355153118/TB223jYo0zJ8KJjSspkXXbF7VXa-3355153118.jpg'
          }
        }]
      }
    },
  ]
};

/**
 *
 * 公共参数
 *
 * */

/**
 *
 * mainApp
 *
 * */

const styles = {
  wrapper: {
    width: 750,
    textAlign: 'center',
  },
};

class MainApp extends Component {
  constructor(props) {
    super(props);
    this.pageUtils = props.pageUtils;
    this.state = {
      mds: props.mds || {},
      gdc: props.gdc || {},
      tabsHeightArr: [4000, 2500, 1500],
    };
    this.pages = [];
    this.sliderTab = this.sliderTab.bind(this);
  }

  goTargetUrl = (url, nid) => {
    let { mds, gdc } = this.state;
    let params = {
      url: url,
      nid: nid || 0,
      widgetId: mds.widgetId,
      moduleName: mds.moduleName
    };

    this.pageUtils && this.pageUtils.goTargetUrl(params);
  };

  // 添加监听器，接收消息
  componentWillMount() {

    if (this.pageUtils && this.pageUtils.pageEmitter) {
      const emitter = this.pageUtils.pageEmitter;
      // console.log('body emitter', emitter);
      emitter.on('clickTab', this.sliderTab);
    }
  }

  // 组件销毁时移除监听器
  componentWillUnmount() {
    if (this.pageUtils && this.pageUtils.pageEmitter) {
      const emitter = this.pageUtils.pageEmitter;
      emitter.off('clickTab', this.sliderTab);
    }
  }

  sliderTab(params) {
    this.refs.tabBox.sliderTo(parseInt(params));
  }

  componentDidMount() {

    const tabRefs = this.pages.map((item, index) => `page${index}`);
    const delay = navigator.platform === 'iOS' ? 10 : 40;
    setTimeout(() => {
      if (Tida.env.isWeex) {
        let domModule = __weex_require__('@weex-module/dom');
        const promises = tabRefs.map(item => {
          return new Promise((resolve, reject) => {
            domModule.getComponentRect(findDOMNode(this.refs[item]), (option) => {
              resolve(option.size.height);
            });
          });
        });
        Promise.all(promises).then(values => {
          this.setState({
            tabsHeightArr: values,
          });
        });
      } else {
        const tabsHeight = tabRefs.map(item => findDOMNode(this.refs[item]).clientHeight * 2);
        this.setState({
          tabsHeightArr: tabsHeight,
        });
      }
    }, delay);

  }

  render() {
    let {
      mds,
      tabsHeightArr,
      mds: {
        moduleData: {
          pages = []
        }
      },
    } = this.state;

    // 校正数据
    pages = pages.length && pages[0].pageJson && pages[0].pageJson.length ?
      pages : defaultModuleData.pages;
    this.pages = pages;

    // props
    const tabBodyProps = {
      style: styles.wrapper,
      heightList: tabsHeightArr,
      ref: 'tabBox',
    };

    return (
      <View data-role={mds.moduleName} data-spmc={`${mds.moduleName}_${mds.widgetId}`}>
        <TabBody {...tabBodyProps}>
          {
            pages.map((page, index) => {
              let pageJson;
              try {
                pageJson = JSON.parse(page.pageJson);
              } catch(e) {
                pageJson = defaultModuleData.pages[0].pageJson;
              }
              const props = {
                mds,
                pageIndex: index,
                json: pageJson,
                ref: `page${index}`,
                onClickHot: (url, nid) => {
                  this.goTargetUrl(url, nid);
                }
              };
              return <ImgAddHot {...props}/>;
            })
          }
        </TabBody>
      </View>
    );
  }
}


export default MainApp;
